<template>
  <div>
    <div class="container">
      <el-form ref="query" :model="query" :inline="true" size="mini">
        <el-form-item label="状态：" prop="status">
          <el-select v-model="query.status" placeholder="请填写状态" clearable>
            <el-option
                v-for="item in $enum.getMapItems('status')"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="名称：" prop="name">
          <el-input
              v-model="query.name"
              placeholder="请填写名称"
              clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="类型：" prop="type">
          <el-select v-model="query.type" placeholder="请填写类型" clearable>
            <el-option
                v-for="item in $enum.getMapItems('vodType')"
                :key="item.value"
                :label="item.name"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="handleSearch"
        >搜索
        </el-button>
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-delete"
            @click="handleClear"
        >清空
        </el-button>
      </el-form>

      <div class="handle-box">
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            class="handle-del mr10"
            @click="handleEdit()"
            v-if="$perm.hasPerm('button_vodConfig_add')"
        >添加
        </el-button>
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-upload"
            class="handle-del mr10"
            @click="handleImport()"
            v-if="$perm.hasPerm('button_vodConfig_import')"
        >导入
        </el-button>
        <el-button
            size="mini"
            type="primary"
            icon="el-icon-delete"
            class="handle-del mr10"
            @click="delAllSelection()"
            v-if="$perm.hasPerm('button_vodConfig_batchDelete')"
        >批量删除
        </el-button
        >
      </div>

      <el-table
          :data="records"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
            align="center"
        ></el-table-column>
        <el-table-column prop="code" label="编码"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="类型" align="center">
          <template #default="scope">
            <el-tag>{{ $enum.getMapValue("vodType", scope.row.type).name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="region" label="服务器区域"></el-table-column>
        <el-table-column prop="accessKey" label="访问key"></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag
                :type="
                scope.row.status === 'ENABLE'
                  ? 'success'
                  : scope.row.status === 'DISABLE'
                  ? 'danger'
                  : 'info'
              "
            >{{ $enum.getMapValue("status", scope.row.status).name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间"></el-table-column>
        <el-table-column prop="modifiedTime" label="更新时间"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row.id)"
                v-if="$perm.hasPerm('button_vodConfig_edit')"
            >编辑
            </el-button>
            <el-button
                type="text"
                icon="el-icon-edit"
                @click="handleEditStatus(scope.row.id, scope.row.status)"
                v-if="$perm.hasPerm('button_vodConfig_editStatus')"
            >
              {{ scope.row.status == "ENABLE" ? "禁用" : "启用" }}
            </el-button>
            <el-button
                type="text"
                icon="el-icon-delete"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
                v-if="$perm.hasPerm('button_vodConfig_batchDelete')"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <custom-page
            :current="query.current"
            :size="query.size"
            :total="total"
            @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 导入弹出框 -->
    <el-dialog
        title="导入"
        v-model="excelImport.importVisible"
        width="50%"
        @closed="closed"
    >
      <div class="basic-btn" style="display: flex">
        <el-upload
            ref="upload"
            class="upload-demo"
            action="#"
            accept=".xls,.xlsx"
            :auto-upload="false"
            :file-list="excelImport.fileList"
            :multiple="false"
            :limit="1"
            :on-change="handleChange"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <div style="margin-left: 20px">
          <el-button type="text" size="medium" @click="exportTemplate()"
          >下载模板
          </el-button
          >
        </div>
      </div>
      <div class="import-info">
        <div>注意事项：</div>
        <ul>
          <li>仅支持导入模板的文件格式</li>
          <li>红色字体的字段为必填</li>
          <li>模板中的表头不可更改，不可删除</li>
          <li>数据记录不要超过1000条</li>
        </ul>
      </div>

      <template #footer>
        <el-button
            type="primary"
            @click="handleImportExcel()"
            :disabled="excelImport.uploading"
        >
          导入
        </el-button>
        <el-button @click="excelImport.importVisible = false"> 取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  vodConfigPageApi,
  vodConfigRemoveApi,
  vodConfigEditStatusApi,
  vodConfigExportTemplateApi,
  vodConfigImportByTemplateApi,
} from "../../api/setup/vodConfig";

export default {
  data() {
    return {
      query: {
        current: 1,
        size: 10,
        status: null,
        name: null,
        type: null,
      },
      records: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      total: 0,
      id: -1,
      excelImport: {
        importVisible: false,
        fileList: [],
        uploading: true,
        file: null,
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      vodConfigPageApi(this.query).then((res) => {
        this.records = res?.bizData?.records;
        this.total = res?.bizData?.total;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.query.current = 1;
      this.getData();
    },
    // 清空
    handleClear() {
      if (this.$refs.query != undefined) {
        this.$refs.query.resetFields();
        this.getData();
      }
    },
    // 启/禁用
    handleEditStatus(id, status) {
      let tip;
      let statusVal;
      if (status == "ENABLE") {
        tip = "确定要禁用吗？";
        statusVal = "DISABLE";
      } else if (status == "DISABLE") {
        tip = "确定要启用吗？";
        statusVal = "ENABLE";
      }
      this.$confirm(tip, "提示", {
        type: "warning",
      }).then(() => {
        vodConfigEditStatusApi({id: id, status: statusVal}).then((res) => {
          this.getData();
        });
      });
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        vodConfigRemoveApi({ids: row.id}).then((res) => {
          this.getData();
        });
      });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      if (length < 1) {
        this.$message.error("请选择数据");
        return;
      }
      this.multipleSelection.filter((item) => {
        this.delList.push(item.id);
      });
      const ids = this.delList.join(",");
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        vodConfigRemoveApi({ids: ids}).then((res) => {
          this.getData();
        });
      });
    },
    // 编辑操作
    handleEdit(id) {
      this.$router.goPage({
        path: "/vod/config/operate",
        query: {
          id,
        },
      });
    },
    // 添加 编辑弹出层关闭动画结束操作
    closed() {
      this.$refs.upload.clearFiles();
    },
    // 分页导航
    handlePageChange(val) {
      this.query.current = val;
      this.getData();
    },
    // 导入
    handleImport() {
      this.excelImport.importVisible = true;
    },
    // 下载导出模板
    exportTemplate() {
      vodConfigExportTemplateApi();
    },
    handleChange(file) {
      this.excelImport.file = file;
      this.excelImport.uploading = false;
    },
    handleImportExcel() {
      this.excelImport.uploading = true;
      const formData = new FormData();
      formData.append("file", this.excelImport.file.raw);
      vodConfigImportByTemplateApi(formData).then(() => {
        this.excelImport.importVisible = false;
        this.getData();
      });
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.import-info {
  font-size: 14px;
  padding: 20px;
  color: #003b80;
  margin-top: 20px;
  background-color: #e5f0ff;
  border: 1px solid #97c7ff;
  line-height: 22px;
}
</style>
